<template>
  <el-dialog :visible.sync="dialogVisible" :title="title" width="500px" @close="onClose">
    <div class="app-container">
      <table class="tb-table">
        <tr>
          <td class="tb-title" width="20%">
            名称:
          </td>
          <td colspan="3">
            {{ this.form.name }}
          </td>
        </tr>
        <tr>
          <td class="tb-title" width="20%">
            编号:
          </td>
          <td colspan="3">
            {{ this.form.code }}
          </td>
        </tr>
        <tr>
          <td class="tb-title" width="20%">
            备注:
          </td>
          <td colspan="3">
            {{ this.form.context }}
          </td>
        </tr>
      </table>
    </div>
  </el-dialog>
</template>

<script>
import { getOne } from '@/api/sysRole'

export default {
  data() {
    return {
      dialogVisible: false,
      title: '查看',
      form: {
        id: '',
        name: '',
        code: '',
        context: ''
      }
    }
  },
  methods: {
    init() {
      if (this.form.id) {
        getOne(this.form.id).then((res) => {
          if (res && res.code === 20000) {
            const rtn = res.data
            this.form.id = rtn.id
            this.form.name = rtn.name
            this.form.code = rtn.code
            this.form.context = rtn.context
          }
        })
      }
    },
    onShow(id) {
      this.form.id = id
      this.dialogVisible = true
      this.init()
    },
    onClose() {
      this.dialogVisible = false
      this.form = this.$options.data().form
    }
  }
}
</script>

<style scoped>
.el-form {
  padding-left: 60px;
  padding-right: 60px;
}
</style>
